{% extends "finance/base.html" %}
{% load static %}
{% load custom_filters %}
{% block content %}

<style>
    .table .table-dark th {
        background-color: rgb(80, 90, 97) !important;
        border-color: rgb(70, 80, 87);
    }

    .table thead th {
        vertical-align: middle;
    }

    .add-button {
        background-color: rgb(80, 90, 97);
        color: white;
        border: none;
    }

    .add-button:hover {
        background-color: rgb(70, 80, 87);
        color: white;
    }

    .table-container {
        overflow-x: auto;
        margin-top: 1rem;
    }
</style>

<div class="d-flex justify-content-between align-items-center" style="padding: 1rem;">
    <h2 style="font-size: 3rem; font-weight: 500; margin: 0;">Chart of Account</h2>
    <input type="text" id="searchInput" class="form-control" placeholder="Search account no..."
        style="max-width: 300px; margin-right: 1rem;">
    <div>
        <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#accountModal"
            onclick="resetForm()">
            Add COA
        </button>
        <a href="{% url 'generate_pdf_account' %}"
            class="btn btn-secondary"
            target="_blank"
            rel="noopener">
            Gen. PDF
        </a>
        <a href="{% url 'export_to_excel_account' %}" class="btn btn-secondary">Export to Excel</a>
        <form method="POST" action="{% url 'upload_excel_account' %}" enctype="multipart/form-data"
            style="display:inline;">

            {% csrf_token %}

            <input type="file" name="excel_file" id="excel_file" accept=".xlsx,.xls" style="display:none"
                onchange="this.form.submit();">

            <button type="button" class="btn btn-secondary" onclick="document.getElementById('excel_file').click();">

                Upload COA

            </button>

        </form>
    </div>

</div>

<div class="table-container with-bottom-padding">
    <table class="table table-striped table-hover" id="accountTable">
        <thead class="table-dark">
            <tr>
                <th scope="col">No</th>
                <th scope="col">Account No</th>
                <th scope="col">Account Name</th>
                <th scope="col">Type</th>
                <th scope="col">Closed</th>
                <th scope="col">Bank</th>
                <th scope="col">Currency</th>
                <th scope="col">Capital</th>
                <th scope="col">FQR</th>
                <th scope="col">FQR Report#</th>
                <th scope="col">FQR Line#</th>
                <th scope="col">Attch. Report#</th>
                <th scope="col">Attach. Line#</th>
                <th scope="col">Attach. Column#</th>
                <th scope="col">Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for acc in account %}
            <tr data-id="{{ acc.id }}" data-acct_no="{{ acc.acct_no }}" data-acct_name="{{ acc.acct_name }}"
                data-acct_type="{{ acc.acct_type }}" data-closed="{{ acc.closed }}" data-bank="{{ acc.bank }}"
                data-currsign="{{ acc.currsign }}" data-capital="{{ acc.capital }}" data-fqr="{{ acc.pqr }}"
                data-reportno="{{ acc.reportno }}" data-lineno="{{ acc.lineno }}" data-attchno="{{ acc.attchno }}"
                data-attchline="{{ acc.attchline }}" data-attchcol="{{ acc.attchcol }}">

                <td>{{ forloop.counter }}</td>
                <td>{{ acc.acct_no|format_acct_no }}</td>
                <td>{{ acc.acct_name }}</td>
                <td>{{ acc.acct_type }}</td>
                <td>{% if acc.closed %}Yes{% else %}No{% endif %}</td>
                <td>{% if acc.bank %}Yes{% else %}No{% endif %}</td>
                <td>{{ acc.currsign }}</td>
                <td>{% if acc.capital %}Yes{% else %}No{% endif %}</td>
                <td>{% if acc.pqr %}Yes{% else %}No{% endif %}</td>
                <td>{{ acc.reportno }}</td>
                <td>{{ acc.lineno }}</td>
                <td>{{ acc.attchno }}</td>
                <td>{{ acc.attchline }}</td>
                <td>{{ acc.attchcol }}</td>

                <td>
                    <div class="d-flex justify-content-center gap-1">
                        <button type="button" class="btn btn-sm btn-secondary" onclick="editAccount('{{ acc.id }}')">
                            <i class="bi bi-pencil-square"></i>
                        </button>

                        <form method="POST" action="{% url 'delete_account' acc.id %}" class="m-0">
                            {% csrf_token %}
                            <button type="submit" class="btn btn-sm btn-danger"
                                onclick="return confirm('Are you sure you want to delete this Account?')">
                                <i class="bi bi-trash"></i>
                            </button>
                        </form>
                    </div>
                </td>
            </tr>
            {% empty %}
            <tr>
                <td colspan="16">No data</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<script>
    document.getElementById('searchInput').addEventListener('keyup', function () {
        let filter = this.value.toLowerCase();
        let rows = document.querySelectorAll('#accountTable tbody tr');

        rows.forEach(row => {
            let text = row.textContent.toLowerCase();
            row.style.display = text.includes(filter) ? '' : 'none';
        });
    });
    function editAccount(acctId) {
        document.getElementById('accountModalLabel').innerText = 'Edit Account No';
        document.getElementById('accountForm').action = "{% url 'edit_account' 0 %}".replace('0', acctId);

        const row = document.querySelector(`tr[data-id="${acctId}"]`);
        if (row) {
            document.getElementById('acct_no').value = row.dataset.acct_no;
            document.getElementById('acct_no').readOnly = true;
            document.getElementById('acct_name').value = row.dataset.acct_name;
            document.getElementById('acct_type').value = row.dataset.acct_type;
            document.getElementById('closed').checked = row.dataset.closed === "True";
            document.getElementById('bank').checked = row.dataset.bank === "True";
            document.getElementById('currsign').value = row.dataset.currsign;
            toggleCurrency();
            document.getElementById('capital').checked = row.dataset.capital === "True";
            document.getElementById('pqr').checked = row.dataset.pqr === "True";
            document.getElementById('reportno').value = row.dataset.reportno;
            document.getElementById('lineno').value = row.dataset.lineno;
            document.getElementById('attchno').value = row.dataset.attchno;
            document.getElementById('attchline').value = row.dataset.attchline;
            document.getElementById('attchcol').value = row.dataset.attchcol;
        }

        const acctModal = new bootstrap.Modal(document.getElementById('accountModal'));
        acctModal.show();
    }

    function resetForm() {
        document.getElementById('accountModalLabel').innerText = 'Add Account No';
        document.getElementById('accountForm').action = "{% url 'save_account' %}";
        document.getElementById('accountForm').reset();
        document.getElementById('acct_no').readOnly = false;
        document.getElementById('closed').checked = false;
        document.getElementById('bank').checked = false;
        document.getElementById('capital').checked = false;
        document.getElementById('pqr').checked = false;
        toggleCurrency();
    }

function toggleCurrency() {

    const bank = document.getElementById("bank");
    const curr = document.getElementById("currsign");

    if (bank.checked) {
        curr.disabled = false;
    } else {
        curr.disabled = true;
        curr.value = "";
    }

}
    document.addEventListener("DOMContentLoaded", function () {
        toggleCurrency();
    });
</script>

<!-- account Modal -->
<div class="modal fade" id="accountModal" tabindex="-1" aria-labelledby="accountModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="accountModalLabel">Add Account No</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">

                <form id="accountForm" method="POST" action="{% url 'save_account' %}">
                    {% csrf_token %}

                    <div class="container-fluid">

                        <!-- ================= GENERAL ================= -->

                        <div class="card mb-3">
                            <div class="card-header fw-bold">
                                General Information
                            </div>

                            <div class="card-body">

                                <div class="row">

                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Account No</label>
                                        <input type="text" class="form-control" id="acct_no" name="acct_no" required>
                                    </div>

                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Type</label>

                                        <select class="form-select" id="acct_type" name="acct_type" required>

                                            <option value="">-- Select Type --</option>

                                            <option value="ASS">
                                                ASS - Asset
                                            </option>

                                            <option value="LNQ">
                                                LNQ - Liability & Equity
                                            </option>

                                            <option value="REV">
                                                REV - Revenue
                                            </option>

                                            <option value="EXP">
                                                EXP - Expense
                                            </option>

                                        </select>

                                    </div>

                                </div>

                                <div class="mb-3">

                                    <label class="form-label">
                                        Account Name
                                    </label>

                                    <input class="form-control" id="acct_name" name="acct_name" required>

                                </div>


                            </div>
                        </div>

                        <!-- ================= PROPERTIES ================= -->

                        <div class="row">

                            <div class="col-md-4">

                                <div class="card">

                                    <div class="card-header fw-bold">
                                        Properties
                                    </div>

                                    <div class="card-body">

                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="checkbox" id="closed" name="closed">

                                            <label class="form-check-label">
                                                Closed
                                            </label>
                                        </div>

                                        <div class="form-check mb-3">
                                            <input class="form-check-input" type="checkbox" id="bank" name="bank" onchange="toggleCurrency()">

                                            <label class="form-check-label">
                                                Bank
                                            </label>
                                        </div>

                                        <div class="mb-3">

                                            <label class="form-label">
                                                Currency
                                            </label>

                                            <select class="form-select" id="currsign" name="currsign">

                                                <option value="">
                                                    -- Select Currency --
                                                </option>

                                                {% for curr in currencies %}
                                                <option value="{{ curr.currsign }}">
                                                    {{ curr.currsign }} - {{ curr.currname }}
                                                </option>
                                                {% endfor %}

                                            </select>

                                        </div>

                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="checkbox" id="capital" name="capital">

                                            <label class="form-check-label">
                                                Capital
                                            </label>
                                        </div>

                                        <div class="form-check">

                                            <input class="form-check-input" type="checkbox" id="pqr" name="pqr">

                                            <label class="form-check-label">
                                                FQR
                                            </label>

                                        </div>

                                    </div>

                                </div>
                            </div>

                            <!-- ================= REPORT MAPPING ================= -->

                            <div class="col-md-8">

                                <div class="card">

                                    <div class="card-header fw-bold">
                                        Report Mapping
                                    </div>

                                    <div class="card-body">

                                        <div class="row mb-2">

                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">FQR Report</label>

                                                <select class="form-select" id="reportno" name="reportno" required>

                                                    <option value="">-- Select No --</option>

                                                    <option value="3">
                                                        3
                                                    </option>

                                                    <option value="4">
                                                        4
                                                    </option>

                                                    <option value="8">
                                                        8
                                                    </option>

                                                    <option value="11">
                                                        11
                                                    </option>

                                                </select>

                                            </div>

                                            <div class="col-md-6">
                                                <label>FQR Line</label>
                                                <input class="form-control" id="lineno" name="lineno">
                                            </div>

                                        </div>

                                        <hr>

                                        <hr>

                                        <div class="row">

                                            <div class="col-md-5 mb-3">

                                                <label class="form-label">
                                                    Attachment Report
                                                </label>

                                                <select class="form-select" id="attchno" name="attchno">

                                                    <option value="">-- Select No --</option>
                                                    <option value="4">4</option>
                                                    <option value="8">8</option>
                                                    <option value="11">11</option>

                                                </select>

                                            </div>

                                            <div class="col-md-3 mb-3">

                                                <label class="form-label">
                                                    Attach Line
                                                </label>

                                                <input class="form-control" id="attchline" name="attchline">

                                            </div>

                                            <div class="col-md-4 mb-3">

                                                <label class="form-label">
                                                    Column
                                                </label>

                                                <input class="form-control" id="attchcol" name="attchcol">

                                            </div>

                                        </div>
                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>

                    <div class="modal-footer">

                        <button class="btn btn-secondary" data-bs-dismiss="modal" type="button">

                            Cancel

                        </button>

                        <button class="btn btn-primary" type="submit">

                            Save

                        </button>

                    </div>

                </form>

            </div>
        </div>
    </div>
</div>

{% endblock %}